<template>
	<view class="container">
		<!-- <view class="cut" v-if="item.paid == 0"></view>
		<view class="section-header" v-if="item.paid == 0">
			<view class="valid_time">
				<text>支付剩余时间</text>{{countdown_time}}
			</view>
			<view class="price">
				￥ <text>{{money}}</text>
			</view>
			<view class="confirm">
				您购买的<text> {{item.name}}</text>
			</view>
		</view> -->
		<view class="cut"></view>
		<view class="orderInfo">
			<view class="cell">
				<text class="a">服务卡名称：</text>
				<text class="b">{{item.name}}</text>
			</view>
			<view class="cell">
				<text class="a">服务卡类型：</text>
				<text class="b">{{item.list.cate_name}}</text>
			</view>
			<view class="cell">
				<text class="a">订单状态：</text>
				<text class="b" v-if="item.list.service_status == 0">待支付</text>
				<text class="b" v-else-if="item.list.service_status == 1">未使用</text>
				<text class="b" v-else-if="item.list.service_status == 2">使用中</text>
				<text class="b" v-else-if="item.list.service_status == 3">已结束</text>
			</view>
			<view class="cell">
				<text class="a">订单编号：</text>
				<text class="b">{{item.order_id}}</text>
			</view>
			<view class="cell">
				<text class="a">下单时间：</text>
				<text class="b">{{item.time}}</text>
			</view>
			<view class="cell">
				<text class="a">余额抵扣：</text>
				<text class="b">￥{{item.use_now_money}}</text>
			</view>
			<view class="cell">
				<text class="a">现金支付：</text>
				<text class="b">￥{{item.pay_price}}</text>
			</view>
			<view class="cell">
				<text class="a">订单总价：</text>
				<text class="b">￥{{item.total_price}}</text>
			</view>
		</view>
		<!-- <uni-popup ref="payConfirm" type="bottom">
			<view class="payConfirm">
				<view class="tit">支付确认</view>
				<view class="money">{{item.pay_price}}</view>
				<view class="cell">
					<view class="a">余额抵扣 ￥ {{item.use_now_money}}</view>
					<view class="a" v-if="actuallyPaid != 0">
						<text>微信支付</text>
						<view class="circle"></view>
					</view>
				</view>
				<view class="btn confirmBtn" @tap="confirmPay">确认支付</view>
			</view>
		</uni-popup>
		<view class="cut"></view>
		<view class="cutBox"></view>
		<view class="footer">
			<view class="btn" @tap="phoneCall">
				联系客服
			</view>
			<view class="btn act" v-if="item.paid == 0" @tap="confirmShow">
				立即支付
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import utils from "@/common/utils.js"
	import util from "@/utils/util.js"
	import {
		servicePay
	} from "@/api/user.js"
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				orderType: null,
				orderInfo: {
					time: '',
					valid_time: ''
				},
				countdown_time: "00:00:00",
				money: null, //需支付金额
				item: {}, // 提货卡信息
				now_money: uni.getStorageSync("userInfo").now_money, //用户余额
				disabled: false, //抵扣开关可切换状态
				yueChecked: false, //抵扣开关状态
				yueDeduction: 0, //抵扣金额
				actuallyPaid: 0, //抵扣后需支付金额
				keyboradShow: false, //操作密码键盘
			}
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
			this.money = this.item.total_price
			this.actuallyPaid = this.money
			this.item.time = util.formatDate(new Date(this.item.add_time*1000));
			// setInterval(() => {
			// 	this.countdown_time = utils.timeCount(this.item.add_time + 1801)
			// }, 1000);
		},
		methods: {
			// //打开支付确认面板
			// confirmShow() {
			// 	this.$refs.payConfirm.open()
			// },
			// //关闭支付确认面板
			// confirmClose() {
			// 	this.$refs.payConfirm.close()
			// },
			// phoneCall() {
			// 	uni.makePhoneCall({
			// 		phoneNumber: uni.getStorageSync("siteSerPhone")
			// 	})
			// },
			// confirmPay() {
			// 	this.confirmClose()
			// 	uni.showLoading({

			// 	})
			// 	servicePay({
			// 		order_id: this.item.order_id
			// 	}).then(res => {
			// 		uni.hideKeyboard()
			// 		// #ifdef MP-WEIXIN
			// 		uni.requestPayment({
			// 			provider: 'wxpay',
			// 			timeStamp: res.data.timestamp,
			// 			nonceStr: res.data.nonceStr,
			// 			package: res.data.package,
			// 			signType: res.data.signType,
			// 			paySign: res.data.paySign,
			// 			success: function(re) {
			// 				uni.redirectTo({
			// 					url:"/pages/center/vip/serviceRecordDetail?item=" +  encodeURIComponent(JSON.stringify(this.item))
			// 				})
			// 			}
			// 		});
			// 		// #endif
			// 		// #ifdef APP-PLUS
			// 		uni.requestPayment({
			// 			provider: 'wxpay',
			// 			orderInfo: res.data.result.jsConfig,
			// 			complete: function(re) {
			// 				uni.navigateBack({

			// 				})
			// 			}
			// 		});
			// 		// #endif
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.cut {
			width: 750rpx;
			height: 24rpx;
			background: rgba(250, 250, 250, 1);
		}

		.section-header {
			background-color: #fff;
			text-align: center;
			padding: 70rpx 0;
			.valid_time {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;

				text {
					font-size: 28rpx;
					margin-right: 10rpx;
				}
			}

			.price {
				font-size: 40rpx;
				color: #333;
				margin: 35rpx 0;
				font-weight: bold;

				text {
					font-size: 72rpx;
				}
			}

			.confirm {
				font-size: 34rpx;

				text {
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
		}


		.orderInfo {
			padding: 30rpx;

			.cell {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 28rpx;
				line-height: 80rpx;

				.a {
					width: 200rpx;
				}

				.b {
					flex: 1;
				}
			}
		}

		// .payConfirm {
		// 	position: relative;
		// 	width: 750rpx;
		// 	height: 80vh;
		// 	padding: 50rpx 75rpx;
		// 	box-sizing: border-box;
		// 	background-color: #fff;
		// 	border-radius: 30rpx 30rpx 0px 0px;
		// 	text-align: center;
		// 	color: rgba(51, 51, 51, 1);

		// 	.tit {
		// 		font-size: 36rpx;
		// 		font-weight: 500;
		// 	}

		// 	.money {
		// 		margin: 120rpx 0 100rpx;
		// 		font-size: 72rpx;
		// 		font-weight: bold;

		// 		&:before {
		// 			content: '￥';
		// 			font-size: 40rpx;
		// 			font-weight: normal;
		// 		}
		// 	}

		// 	.cell {
		// 		font-size: 28rpx;

		// 		.a {
		// 			display: flex;
		// 			height: 100rpx;
		// 			justify-content: space-between;
		// 			align-items: center;

		// 			.circle {
		// 				width: 24rpx;
		// 				height: 24rpx;
		// 				border-radius: 50%;
		// 				background: rgba(251, 200, 102, 1);
		// 				border: 6rpx solid #fff;
		// 				box-shadow: 0 0 0 2rpx rgba(251, 200, 102, 1);
		// 			}
		// 		}
		// 	}

		// 	.confirmBtn {
		// 		position: absolute;
		// 	}
		// 	.btn {
		// 		position: fixed;
		// 		left: 75rpx;
		// 		bottom: calc(env(safe-area-inset-bottom) + 70rpx);
		// 		width: 600rpx;
		// 		height: 80rpx;
		// 		border-radius: 40rpx;
		// 		background-color: #FBC866;
		// 		font-size: 32rpx;
		// 		font-weight: 500;
		// 		color: rgba(255, 255, 255, 1);
		// 		line-height: 80rpx;
		// 		text-align: center;
		// 	}
		// }
		// .cutBox {
		// 	height: calc(env(safe-area-inset-bottom) + 110rpx);
		// }
		// .footer {
		// 	position: fixed;
		// 	width: 750rpx;
		// 	height: 110rpx;
		// 	bottom: env(safe-area-inset-bottom);
		// 	display: flex;
		// 	justify-content: flex-end;
		// 	align-items: center;
		// 	text-align: center;
		// 	font-size: 26rpx;
		// 	z-index: 1;
		// 	box-shadow: 0 0 16rpx rgba(0,0,0,.1);
		// 	background-color: #fff;
		
		// 	.btn {
		// 		margin-right: 40rpx;
		// 		height: 70rpx;
		// 		line-height: 70rpx;
		// 		padding: 0 40rpx;
		// 		border: 1rpx solid #ddd;
		// 		color: #333;
		// 		border-radius: 35rpx;
		// 	}
		
		// 	.act {
		// 		border: 1rpx solid #FBC866;
		// 		color: #fff;
		// 		background-color: #FBC866;
		// 	}
		// }
	}
</style>
